<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    isFixed?: boolean
    boxHeight?: number
  }>(),
  {
    isFixed: false,
    boxHeight: 100,
  },
)
</script>

<template>
  <view>
    <view
      class="bottom-footer-view"
      :style="{
        position: props.isFixed ? 'fixed' : 'relative',
        left: 0,
        right: 0,
      }"
    >
      <slot></slot>
    </view>
    <view
      v-if="props.isFixed"
      :style="`height: calc(${props.boxHeight}rpx + env(safe-area-inset-bottom));`"
    ></view>
  </view>
</template>

<style lang="scss" scoped>
.bottom-footer-view {
  bottom: calc(env(safe-area-inset-bottom) + 10rpx);
}
</style>
